import React, {useEffect, useState} from 'react';
import {Space, Table, Tooltip, Button, Switch, Popconfirm, message} from "antd";
import {FormOutlined,DeleteOutlined} from "@ant-design/icons";
import {useAppDispatch} from "@/hooks";
import {
    changeStateById,
    deleteHospitalSetByIdAsync,
    getHospitalSetAsync,
    getHospitalSetLockIdAsync,
    useSelectorHosp,
    deleteBatchMoveAsync
} from "@/store/slice/hosp";
import {useSelectorCommon} from "@/store/slice/common";
import HospitalModal from "@/pages/hospital/hospitalSet/components/HospitalModal";

function HospitalSet() {
    const dispatch = useAppDispatch();
    const {hospSetList} = useSelectorHosp();
    const {pageInfo,loading} = useSelectorCommon();
    // 控制modal的显示与隐藏
    const [isModalVisible,setIsModalVisible] = useState<boolean>(false);
    // 控制modal的标题
    const [modalTitle,setModalTitle] = useState<string>("添加医院设置");
    // 指定修改的内容
    const [hospitalSetInfo,setHospitalSetInfo] = useState<any>(null);
    // 选中的id
    const [selectedId,setSelectedId] = useState<number>(-1);
    // 选中要删除的设置
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    useEffect(() => {
        dispatch(getHospitalSetAsync(1, 5));
    }, []);
    return (
        <div>
            <Space style={{marginBottom: 16}}>
                <Button type={"primary"} onClick={()=>{
                    setHospitalSetInfo(null);
                    setModalTitle("添加医院设置");
                    setIsModalVisible(true);

                }}>添加医院设置</Button>
                <Button type="primary" onClick={async ()=>{
                    await dispatch(deleteBatchMoveAsync(selectedRowKeys));
                    setSelectedRowKeys([]);
                    message.success("批量删除成功");
                }} disabled={selectedRowKeys.length===0} loading={loading}>
                    批量删除{selectedRowKeys.length}条
                </Button>
                {/*<span style={{marginLeft: 8}}>*/}
                {/*  {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}*/}
                {/*</span>*/}
            </Space>
            <Table
                rowSelection={{
                    selectedRowKeys,
                    onChange(newSelectedRowKeys: React.Key[]){
                        console.log(newSelectedRowKeys)
                        setSelectedRowKeys(newSelectedRowKeys);
                    }
                }}
                loading={loading}
                pagination={{
                    ...pageInfo,
                    onChange(page,pageSize){
                        // console.log(page,pageSize);
                        dispatch(getHospitalSetAsync(page,pageSize));
                    }
                }}
                rowKey={"id"}
                /*增加表格边框*/
                bordered={true}
                scroll={{x:1800}}
                columns={[
                    {
                        title:"序号",
                        width:70,
                        align:"center",// 居中
                        // dataIndex:"id",
                        // 第一个参数：如果没有设置dataIdex,那么值为该行信息
                        render(value,rows,index){
                            // console.log(value,rows,index);
                            return (pageInfo.current-1)*pageInfo.pageSize+ index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        width:200,
                        ellipsis:true,// 超过宽度将自动省略
                        dataIndex:"hosname"
                    },{
                        title:"医院编号",
                        align:"center",
                        dataIndex:"hoscode"
                    },{
                        title:"是否锁定",
                        align:"center",
                        // 0：锁定 1：未锁定
                        dataIndex:"status",
                        render(status,rows){
                            return (
                                <Switch checked={status===0} onChange={()=>{
                                    // dispatch(changeStateById(rows.id))
                                    dispatch(getHospitalSetLockIdAsync(rows.id,status));
                                }} />
                            )
                        }
                    },{
                        title:"api基础地址",
                        align:"center",
                        dataIndex:"apiUrl"
                    },{
                        title:"密钥",
                        align:"center",
                        width:150,
                        ellipsis:true,// 超过宽度将自动省略
                        dataIndex:"signKey"
                    },{
                        title:"联系人姓名",
                        align:"center",
                        dataIndex:"contactsName"
                    },{
                        title:"联系人手机",
                        align:"center",
                        dataIndex:"contactsPhone"
                    },{
                        title:"添加时间",
                        align:"center",
                        dataIndex:"createTime"
                    },{
                        title:"更新时间",
                        align:"center",
                        dataIndex:"updateTime"
                    },{
                        title:"操作",
                        align:"center",
                        // dataIndex:"hosname",
                        fixed:"right",// 右浮动
                        render(rows){
                            return (
                                <Space>
                                    <Tooltip title="编辑">
                                        <Button onClick={()=>{
                                            setModalTitle("修改医院设置");
                                            setHospitalSetInfo({...rows});
                                            setIsModalVisible(true);
                                        }} type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>

                                    {
                                        //1- onConfirm 指定的不是async函数会自动关闭
                                        // 2- 指定方向
                                    }
                                    <Popconfirm
                                        placement="topRight"
                                        title={"确定要删除"+rows.hosname+"信息吗？"}
                                        onConfirm={()=>{
                                            dispatch(deleteHospitalSetByIdAsync(rows.id)).then(()=>{
                                                message.success("删除"+rows.hosname+"成功");
                                            })


                                        }}
                                        okText="是"
                                        cancelText="否"
                                    >
                                        <Tooltip title="删除">
                                            <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                        </Tooltip>
                                    </Popconfirm>

                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospSetList}/>


            <HospitalModal hospitalSetInfo = {hospitalSetInfo} modalTitle={modalTitle} setIsModalVisible={setIsModalVisible} isModalVisible={isModalVisible}/>
        </div>
    );
}

export default HospitalSet;